<template>
	<view class="blog-container" v-if="blog">
		<h1 style="text-align: center;">详情</h1>
		<view class="author">{{ blog.userName }}</view>
		<view class="content">
			<view class="contentTxt">
				{{ blog.blogContent }}
			</view>
			<view class="contentimg" v-if="blog.images">
				<view class="imgs" v-for="(i, index) in blog.images" :key="index">
					<img :src="i" alt="">
				</view>
			</view>
		</view>
		<view class="icon">
			<view class="like">
				<uni-icons type="hand-up-filled" size="30"></uni-icons>
				<view class="count">{{ blog.likeCount }}</view>
			</view>
			<view class="comm">
				<uni-icons type="chat-filled" size="30"></uni-icons>
				<view class="count" v-if="blog.comments.length">{{ blog.comments.length }}</view>
				<view class="count" v-else>0</view>
			</view>
		</view>
		<h4>所有评论</h4>
		<view class="comment" v-if="blog.comments">
			<view class="txt" v-for="(i, index) in blog.comments" :key="index">
				<view class="name">{{ i.userName }}</view>
				<view class="pl">{{ i.content }}</view>
			</view>
		</view>
	</view>
	<view v-else style="margin: 20px;text-align: center;">
		内容获取有误，请重试
	</view>
</template>

<script>
export default {
	data() {
		return {
			blog: null
		};
	},
	onLoad(options) {
		// options 包含 URL 参数
		if (options.blog) {
			this.blog = JSON.parse(options.blog);
			// this.blog = JSON.stringify(options.blog);
			console.log('Received blog:', this.blog);
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../uni.scss";

.blog-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	box-sizing: border-box;

	.author {
		font-size: larger;
		font-weight: bolder;
		color: $title-color;
	}

	.content {
		width: 100%;
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		gap: 10px;

		.contentimg {
			display: flex;
			gap: 5px;

			.imgs {
				width: 100%;

				img {
					width: 100%;
				}
			}
		}
	}

	.icon {
		display: flex;
		gap: 40px;

		.comm {
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.like {
			display: flex;
			align-items: center;
			gap: 5px;
		}
	}

	.comment {

		.txt {
			display: flex;
			flex-direction: column;
			gap: 10px;

			.name {
				font-size: larger;
				color: $title-color;
			}

			.pl {
				width: 100%;
				background-color: #ccc;
				color: white;
				margin-left: 20px;
				padding: 10px;
				border-radius: 10px;
			}
		}
	}
}
</style>
